<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue入门</title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			搜索：<input type="text" v-model.trim="keyword" />
		  <ul>
			  <!-- for(item in aritcleList) -->
			<hr>
			<!-- <li v-for="(item,index) in filterPerson" :key="index">
				{{index}}-{{ item.author }}
				<input type="text"/>
			</li> -->
			<li v-for="(item,index) in articleList" :key="item.id">
				{{index}}-{{ item.title }}-{{ item.author }}
				<input type="text"/>
			</li>
		  </ul>
		  <button @click="addPerson" type="button">加入一个老刘</button>
		  <button @click="editTitle" type="button">修改一篇文章</button>
		  
		  <!-- <table border="1">
		  	<tr>
				<td>id</td>
				<td>标题</td>
				<td>作者</td>
				<td>操作</td>
			</tr>
			<tr v-for="item in articleList">
				<td>{{item.id}}</td>
				<td>{{item.title}}</td>
				<td>{{item.author}}</td>
				<td><button @click="addCart(item)" type="button">加入购物车</button></td>
			</tr>
		  </table> -->
		</div>
		
		<script>
		Vue.config.productionTip = false
		var vm = new Vue({
		  el: '#app',
		  data: {
		    articleList: [
				{id:'001',title:'11111111',author:'张三'},
				{id:'002',title:'22222222',author:'赵六'},
				{id:'003',title:'33333333',author:'李四'},
				{id:'004',title:'44444444',author:'李明'},
				{id:'005',title:'55555555',author:'麻子'},
				{id:'006',title:'66666666',author:'张飞'},
			],
			keyword:'',
			filterPerson:[]
		  },
		  watch:{
			  keyword:{
				  immediate:true,
				  handler(){
					  _this = this
					  this.filterPerson = this.articleList.filter(function(p){
						  return p.author.indexOf(_this.keyword) !== -1
					  })
				  }
			  }
		  },
		  methods:{
			  addPerson(){
				  this.articleList.unshift(
				  {id:'007',title:'7777',author:'老刘'}
				  )
			  },
			  editTitle(){
				  //不生效的做法
				  // this.articleList[0] = {id:'001',title:'标题吧',author:'张三'}
				  //从0开始，修改1个，修改的数据是第三个参数
				  
				  // this.articleList.splice(0,1,{id:'001',title:'标题吧',author:'张三'})
				  
				  // Vue.set(this.articleList,0,{id:'001',title:'标题吧',author:'张三'})
				  
				  // this.$set(this.articleList,0,{id:'001',title:'标题吧',author:'张三'})
			  }
		  }
		})
		</script>
	</body>
</html>
